import {Layout, Menu, Icon, Row, Col, Modal} from 'antd';
import React, {Component} from 'react';
import logo from '../image/logo.jpg';
import {Link, Route, Switch} from 'react-router-dom';
import '../css/login.css';
import {config} from '../config';
import app from '../app';
import NewsLists from './News';//新闻中心
import SuccessfulCases from './SuccessfulCase';//成功案例
import exit from '../image/exit.png';
import admin from '../image/admin.png';

const path = config.path;
const {SubMenu} = Menu;
const confirm = Modal.confirm;
const {Header, Content, Sider} = Layout;

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            key: '0',
            username: '',
            menuList: [],
            currentKey: path + '/home/successfulCases', //选中的菜单
        };
    }

    //左边菜单栏
    menuList = [
        {component: SuccessfulCases, menu_path: '/home/successfulCases', menu_icon: 'smile', menu_name: '成功案例'},
        {component: NewsLists, menu_path: '/home/newsLists', menu_icon: 'smile', menu_name: '新闻中心'}
    ];

    routeList = [
        {component: SuccessfulCases, menu_path: '/home/successfulCases', menu_icon: 'smile', menu_name: '成功案例'},
        {component: NewsLists, menu_path: '/home/newsLists', menu_icon: 'smile', menu_name: '新闻中心'}
    ];

    render() {
        return (
            <span style={{height: '100%'}}>
                <Layout style={{height: '100%'}}>
                    <Sider width={200} style={{overflowY: 'auto', overflowX: 'hidden',}} className="hiddenScroll">
                             <span style={{
                                 display: 'inline-block',
                                 width: '200px',
                                 height: '110px',
                                 backgroundColor: 'white'
                             }}>
                                 <img width={'200px'} height={'110px'}
                                      style={{position: 'relative'}} src={logo} alt=""/>
                             </span>
                        <Menu mode="inline"
                              theme="dark"
                              selectedKeys={[this.state.currentKey]}
                              onClick={(item) => this.handleMenuClick(item)}>
                            {
                                this.menuList.map((item, index) => {
                                    return (
                                        <Menu.Item key={path + item.menu_path} rowKey={index}>
                                            <span>
                                                <Icon type={item.menu_icon}/>
                                                <span>{item.menu_name}</span>
                                            </span>
                                        </Menu.Item>
                                    )
                                })
                            }
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header
                            style={{color: 'white', backgroundColor: '#404040', height: '110px', lineHeight: '110px'}}>
                            <Row>
                                <Col span={24}
                                     style={{display: 'flex', fontSize: '25px', justifyContent: 'center'}}>领蓝信息科技有限公司后台管理系统</Col>
                                <div style={{position: 'absolute', right: '0px', fontSize: '17px', display: 'flex'}}>
                                    <span style={{marginRight: '5px', marginTop: 4}}><img src={admin} style={{
                                        width: 24,
                                        height: 24
                                    }}/>
                                    </span>
                                    <span style={{color: 'red', marginRight: '20px'}}>{this.state.username}</span>
                                    <span className="exit" style={{marginRight: '10px'}} onClick={() => {
                                        this.handleExit()
                                    }}>退出</span>
                                    <span className="exit" style={{marginRight: '10px', marginTop: 4}} onClick={() => {
                                        this.handleExit()
                                    }} title="退出"><img src={exit} style={{width: 20, height: 20}}/></span>
                                </div>
                            </Row>
                        </Header>
                        <Content style={{background: '#fff', padding: '10px 24px 24px 24px', margin: 24, position:'relative'}}>
                            <Switch>
                                {
                                    this.routeList.map((item, index) => {
                                        return <Route key={index} path={path + item.menu_path}
                                                      component={item.component}/>
                                    })
                                }
                            </Switch>
                            <div className="footer">
                                技术支持：佛山市领蓝信息科技有限公司
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </span>
        )
    }

    // 跳转页面菜单的显示控制
    componentWillReceiveProps(props) {
        let tempPath = props.location.pathname;
    }

    componentDidMount() {
        window._this = this;
        let username = app.getData('username');
        this.setState({username});
        // 判断是否登录
        if (!app.getToken()) {
            app.alert('请重新登录', 'error', 3);
            this.props.history.push(path + '/login');
        }
        else {

            const key = app.getData('currentKey');  //保存之前点过的菜单
            if (key) {
                this.handleMenuClick({key});
                this.setState({
                    currentKey: key
                });
            }
        }
    }

    handleMenuClick({key}) {
        app.scrollTop();
        window._this = this;

        let token = app.getToken();
        if (!token) {

        } else {
            this.setState({
                currentKey: key
            });
            app.setData('currentKey', key);
            this.props.history.push(key);
        }
    }

    // 点击退出按钮
    handleExit() {
        let _this = this;
        confirm(
            {
                title: '',
                content: '您确定要退出吗？',
                okText: '确定',
                cancelText: '取消',
                onOk() {
                    app.removeToken();
                    _this.props.history.push(path + "/login");
                },
                onCancel() {
                },
            });
    }
}

export default Home;

